<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style type="text/css">
	.file-list li{
		margin: 5px 0;
	}
	.file-list li a{
		margin: 0 5px;
	}
	.file-list li span.url-content{
		width: 230px;
		overflow: hidden;
		display: inline-block;
	}

</style>
<script type="text/javascript">
		function deleteImg(id){
			$('#' + id).remove();
		}
		
		function viewImg(url){
			var div = $('<div class="view-img-content" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:10000;text-align:center;"></div>');
			//var img = $('<img style="tet">');
			//img.attr('src',url);
			var modul = 	$( '<div class="view-img-content" style="background:#cfcfcf;opacity:0.5;position:fixed;left:0;top:0;z-index:9900"></div>').css({
				width:$('body').width(),
				height:$('body').height()
			});
			
			
			var close = '<div onclick="$(\'.view-img-content\').remove()" style="background:#999;position:absolute;right:-50px;top:-50px;width:100px;height:100px;line-height:140px;text-align:left;padding-left:20px;color:red;    border-radius: 50px;font-size:50px;    cursor: pointer;">×</div>';
			div.append(close);
			var img = new window.Image();
			img.src  = url;
			div.append(img);
			
			img.onerror = function(evt)	{
					parent.$.messager.alert('提示', '图片预览出错', 'info');
			};
			
			img.onload = function(event){
				if(typeof(img.readyState)=='undefined')
			    {
					img.readyState = 'undefined';
			    }
			  //在IE8以及以下版本中需要判断readyState而不是complete
			  if ((img.readyState=='complete'||img.readyState=="loaded")||img.readyState)	
			  { 
				  	var bodyH = $('body').height() ;
				  	var bodyW = $('body').width() ;
				  	if(img.width >bodyW){
				  		img.style.width =bodyW + 'px' ;
				  	} else if(img.height > bodyH) {
				  		img.style.height = bodyH + 'px';
				  	}
				  	
				  	div.css('line-height',bodyH + 'px');
					$('body').append(div);
				  	if(img.width >bodyW){
				  		img.style.width =bodyW  + 'px';
				  	} else if(img.height > bodyH) {
				  		img.style.height = bodyH + 'px';
				  	}
				  	$('body').append(modul);
			  }else{
				  	parent.$.messager.alert('提示', '图片预览出错', 'info');
			  }
			};
		}
		
	$(function() {
		parent.$.messager.progress('close');
		
		
		//文件上传
		function createImg(url){
			var id = new Date().getTime();
			var li = $('<li>');
			li.attr('id',id);
			var span = $('<span  class="url-content"></span>');
			span.html(url);
			var del = $('<a  id="delete" onclick="deleteImg(\'' +id+  '\')" class="easyui-linkbutton" >删除</a>').linkbutton();
			var view = $('<a  id="delete" onclick="viewImg(\'' + url+  '\')" class="easyui-linkbutton" >预览</a>').linkbutton();
			li.append(span);
			li.append(del);
			li.append(view);
			$('.file-list').append(li);
			
		}
		
		//创建上传form
		function createUploadForm(){
		
			var uploadurl = 'http://118.123.116.251/uploadFile/image';
			var image = $('<input name="images" type="file" />');
			$('#file-upload-form').html(image);
			image.click();
			image.change(function(){
				if(!/^.*.(png|jpg|jpeg|gif|bmp|BMP|JPG|JPEG|PNG|GIF)$/.test(image.val())) {
					parent.$.messager.alert('错误','请选择数据图片类型', 'error');
					return ;
				}
				
				parent.$.messager.progress({
					title : '提示',
					text : '图片处理中，请稍后....'
				});
				$('#file-upload-form').ajaxSubmit({
		            type: "post",
		            url: uploadurl,
		            'dataType ':'jsonp',
		            success: function(data){
						parent.$.messager.progress('close');
		            	if('ok' == data.code){
		            		createImg(returndata.data.join());
		            	} else {
			            	parent.$.messager.alert('错误','请选择数据图片类型', 'error');
		            	}
		            },
		            error:function(data){
		            	parent.$.messager.progress('close');
		            	try{
		            		var returndata =  eval("(" + data.responseText + ")");
			            	if(returndata && 'ok' == returndata.code){
			            		createImg(returndata.data.join());
			            	} else {
				            	parent.$.messager.alert('错误','请选择数据图片类型', 'error');
			            	}
		            	} catch(e){
				            	parent.$.messager.alert('错误','请选择数据图片类型', 'error');
		            	}
		            }
		        });
				
			});
			return form;
		}
		
		$('#select-img-btn').click(function(){
			var form = createUploadForm();
		});
		
		
		
		
			
		$('#form').form({
			url : '/ads/add',
			onSubmit : function() {
				parent.$.messager.progress({
					title : '提示',
					text : '数据处理中，请稍后....'
				});
				var isValid = $(this).form('validate');
				if (!isValid) {
					parent.$.messager.progress('close');
				}
				
				var urls = [];
				
				var urlc = $('.url-content');
				
				for(var k=0;k<urlc.length;k++){
					urls.push(urlc[k].innerHTML);
				}
				$('#form input[name="images"]').val(urls.join(','));
				parent.$.messager.progress('close');
				return isValid;
			},
			success : function(result) {
				try{
					parent.$.messager.progress('close');
					result = $.parseJSON(result);
					if (result.success) {
						parent.$.modalDialog.openner_dataGrid.datagrid('reload');//之所以能在这里调用到parent.$.modalDialog.openner_dataGrid这个对象，是因为user.jsp页面预定义好了
						parent.$.modalDialog.handler.dialog('close');
					} else {
						parent.$.messager.alert('错误', result.msg, 'error');
					}
				} catch(e){
						parent.$.messager.alert('错误', result, 'error');
				}
			}
		});
	});
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
	<div data-options="region:'center',border:false" title="" style="overflow: hidden;">
		<form id="form" method="post" style="overflow: auto;height: 100%">
			<input name="location" type="hidden" class="span2" value="<%=request.getParameter("location") %>" readonly="readonly">
			<input name="images" type="hidden" class="span2" value="" readonly="readonly">
			
			<table class="table table-hover table-condensed">
				<tr>
					<th>广告名字</th>
					<td><input name="title" type="text" placeholder="请输入广告名" style="width:400px;" class="easyui-validatebox span2" data-options="required:true" value=""></td>
				</tr>
				<tr>
					<th>广告状态</th>
					<td>
						开启<input  name="status" value="1"  type="radio" checked="checked" > 
						关闭<input  name="status" value="0" type="radio"> 
						</td>
				</tr>
				<tr>
					<th>排序</th>
					<td>	<input class="easyui-slider"  name="orders" style="width:400px" data-options="min:1,max:100,showTip:true"  value="1"></td>
				</tr>
				<tr>
					<th>选择图片</th>
					<td id="select-img">
						<ul class="file-list">
						</ul>
						<a  id="select-img-btn" class="easyui-linkbutton" >选择图片</a>
						<!-- 
						<input name="images" type="password" placeholder="输入图片" class="easyui-validatebox span2" data-options="required:true">
						 -->
					</td>
				</tr>
				<tr>
					<th>广告页面</th>
					<td>
							<input name="url" type="url" style="width:400px;" placeholder="请输入广告 页面URL" class="easyui-validatebox span2" data-options="required:true">
					</td>
				</tr>
				<tr>
					<th>广告内容</th>
					<td>
						<textarea  name="content"  style="width:400px;" class="easyui-validatebox span2" data-options="required:true" ></textarea>
					</td>
				</tr>
			</table>
		</form>
		<form enctype="multipart/form-data" id="file-upload-form" style="display: none;">
	</div>
		</form>
</div>